import React, { useState } from 'react'

import { nanoid } from 'nanoid'

import Header from './components/Header/index.jsx'
import List from './components/List/index.jsx'
import Footer from './components/Footer/index.jsx'

import '../src/App.css'
export default function App() {
  const [todoList, setTodoList] = useState([
    { id: nanoid(), todo: '唱', done: false },
    { id: nanoid(), todo: '跳', done: false },
    { id: nanoid(), todo: 'Rap', done: false }
  ])
  return (
    <div className='todo-container'>
      <div className='todo-wrap'>
        <Header setTodoList={setTodoList} todoList={todoList} />
        <List todoList={todoList} setTodoList={setTodoList} />
        <Footer />
      </div>
    </div>
  )
}




